<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .container{
        width:600px;
        height:400px;
        margin-left: auto;
        margin-right: auto;
        border:1px solid #333;
        position: relative;
        overflow: hidden;
    }
    .list{
        position: absolute;
    }
    .list img{
        float: left;
    }
    #prev,#next{
        position: absolute;
        background: url("images/icon-slides.png")no-repeat;
        top:50%;
        width:40px;
        height:70px;
        transform: translateY(-50%);
        border:none;
    }
    #next{
        position: absolute;
        right:0px;
        background-position-x: -42px;
    }
    #btns{
        position: absolute;
        bottom: 20px;
        left:50%;
        transform: translateX(-50%);
    }
    #btns span{
        width:25px;
        height:25px;
        cursor: pointer;
        display:inline-block;
        background: rgba(51,51,51,0.422);
        border-radius: 50%;
    }
    #btns .current{
        background: orangered; 
    }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="list" id="list" style="left:-600px">
            <img src="images/05.png" alt="">
            <img src="images/01.png" alt="">
            <img src="images/02.png" alt="">
            <img src="images/03.png" alt="">
            <img src="images/04.png" alt="">
            <img src="images/05.png" alt="">
            <img src="images/01.png" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
      var container=document.getElementById("container");
      var list=document.getElementById("list");
      var prev=document.getElementById("prev");
      var next=document.getElementById("next");
      var btns=document.getElementById("btns").children;
      var index=0;
      prev.onclick=function(){
          index--;
          if(index<0){
              index=4;
          }
          showbtn();
          animate(600);
      }
      next.onclick=function(){
          index++;
          if(index>4){
              index=0;
          }
          showbtn();
          animate(-600);
      }
      for(let i=0;i<btns.length;i++){
          btns[i].value=i;
          btns[i].onclick=function(){
              let offset=(this.value-index)*-600;
              index=this.value;
              animate(offset);
              showbtn();
          }
      }
    function showbtn(){
        for(let i=0;i<btns.length;i++){
              btns[i].classList.remove("current");
          }
          btns[index].classList.add("current");
      }

    function animate(offset){
      let newleft=parseInt(list.style.left)+offset;
          if(newleft>-600){
              list.style.left=-3000+"px";
          }else if(newleft<-3000){
              list.style.left=-600+"px";
          }else{
              list.style.left=newleft+"px";
          }
      }
     
    </script>
</body>
</html>